Skip to content

P18 phase 2: stacked layout for the IDE (editor part) - #30

Merged
cedricvogel-leo merged 1 commit into
mainfrom
feature/ide-stacked-layout
Oct 25, 2026
Merged

cedricvogel-leo merged 1 commit into
mainfrom
feature/ide-stacked-layout

Conversation

@cedricvogel-leo

Copy link
Copy Markdown
Collaborator

Editor part of P18 phase 2 (spec: teaching-agent journal.md → Visual Identity → «glpython-IDE (Hülle um den Editor)»). The IDE shell itself is a separate PR in the IDE repo, which needs this as v0.1.11.

Stacked layout (without compact, i.e. the IDE):

  • The editor at full width on top, the console at full width below, and a divider between them. It can be dragged with mouse, pen or finger, and moved with ↑/↓, Page Up/Down, Home and End (role="separator", aria-valuenow, named «Grösse der Konsole»). The console starts at ⅓ of the height, and the position is remembered in the browser.
  • Visualizing replaces the editor in the top area. The visualizer's bar takes the tabs' strip, so nothing below moves (measured: console y 452 → 452, divider y 438 → 438). The console shows the output of the current step, and ✕ returns.
  • Graphics only while the program draws: then the top area splits, editor left and graphics right. For a visualization the panel shows if the program draws at all, so it doesn't appear in the middle of stepping. Its ✕ hides it until the next drawing. There is no permanent «Grafik» strip any more.
  • File tabs above the editor. capabilities.closeFileTabs: false drops their ✕, for a host that shows every file as a tab.
  • Empty editor: shows «Code hier eingeben» (editorPlaceholder, Monaco's placeholder).

Buttons in the embed's order and labels: ▶ Ausführen · Tests · Visualisieren · Zurücksetzen (en: Run · Tests · Visualize · Reset).

  • They stay while visualizing, and leave the visualizer first.
  • actionsContainer puts them into the host's bar (the IDE's top bar).
  • Zurücksetzen now restarts Python and clears the console, visualization and drawing, as the embed's Reset does. Before, it only cleared the output.
  • ▶ and ■ sit stacked in one button, so it keeps its width when it becomes Stop (measured: 118 → 118px, Tests doesn't move).
  • Changed coreStrings: runProject «Ausführen», resetOutput «Zurücksetzen», collapseGraphics «Grafik ausblenden». New strings: consoleSize, editorPlaceholder.

The embed is unchanged. The compact tree is assembled from the same JSX pieces into its old structure. The six embed screenshots (REPL, visualization and turtle at 1440 and 820 widths) are byte-identical to before this change.

Lint (known warning only), both builds, test:protocol, test:runtime and test:hints pass. I tested it in the IDE shell PR's build; the screenshots are in the phase report.

🤖 Generated with Claude Code

Without compact, the workspace is stacked: the editor (or, while
visualizing, the visualizer, whose bar takes the tabs' strip) in full width
on top, a divider that can be dragged or moved with the keys (the console's
share, a third at first, is remembered), and the console in full width
below. Graphics show beside the editor only while the program draws, with a
✕ that hides them until the next drawing; no permanent «Grafik» strip. An
empty editor shows «Code hier eingeben».

The buttons come in the embed's order and labels (▶ Ausführen · Tests ·
Visualisieren · Zurücksetzen), stay while visualizing, and can be put into
the host's bar (actionsContainer). Zurücksetzen restarts Python and clears
the console, as in the embed. The run button keeps its width as ▶ becomes ■.
closeFileTabs: false drops the tabs' ✕.

The compact layout (the embed) is assembled from the same pieces into its
old tree; its screenshots are byte-identical to before.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@cedricvogel-leo
cedricvogel-leo merged commit 7f593b1 into main Oct 25, 2026
1 check passed
cedricvogel-leo added a commit to glpython-edu/glpython-edu.github.io that referenced this pull request Oct 25, 2026
▶ Ausführen already starts with a fresh namespace and an empty console, ■
Stoppen ends a hung program, and learners read «Zurücksetzen» as "reset my
code". So the bar keeps ▶ · Tests · Visualisieren, and ⋮ starts with
«Python neu starten», which mounts the workspace anew (a new Python, an
empty console, as the embed's Reset; the code stays).

Pins glpython-editor v0.1.11 (glpython-edu/glpython-editor#30).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant